<!--
 * @Descripttion:营业账单右边卡片
-->
<template>
  <div>
    <!-- 骨架屏 -->
    <div v-if="loading" class="bill-card-box show">
      <el-skeleton :rows="20" animated>
        <template #template>
          <!-- 标题骨架 -->
          <el-skeleton-item variant="h1" style="width: 200px; margin: 0 auto 20px" />
          <el-skeleton-item variant="h3" style="width: 120px; margin: 0 auto 30px" />

          <!-- 基本信息骨架 -->
          <div style="margin-bottom: 20px">
            <el-skeleton-item variant="text" style="width: 100%; margin-bottom: 10px" />
            <el-skeleton-item variant="text" style="width: 80%; margin-bottom: 10px" />
            <el-skeleton-item variant="text" style="width: 90%; margin-bottom: 10px" />
            <el-skeleton-item variant="text" style="width: 70%; margin-bottom: 10px" />
          </div>

          <!-- 分割线 -->
          <el-skeleton-item variant="rect" style="width: 100%; height: 1px; margin: 20px 0" />

          <!-- 表头骨架 -->
          <div
            style="
              display: grid;
              grid-template-columns: repeat(4, 1fr);
              gap: 10px;
              margin-bottom: 20px;
            "
          >
            <el-skeleton-item variant="text" />
            <el-skeleton-item variant="text" />
            <el-skeleton-item variant="text" />
            <el-skeleton-item variant="text" />
          </div>

          <!-- 菜品列表骨架 -->
          <div v-for="i in 5" :key="i" style="margin-bottom: 15px">
            <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px">
              <el-skeleton-item variant="text" />
              <el-skeleton-item variant="text" />
              <el-skeleton-item variant="text" />
              <el-skeleton-item variant="text" />
            </div>
          </div>

          <!-- 分割线 -->
          <el-skeleton-item variant="rect" style="width: 100%; height: 1px; margin: 20px 0" />

          <!-- 价格信息骨架 -->
          <div style="margin-bottom: 20px">
            <el-skeleton-item variant="text" style="width: 100%; margin-bottom: 10px" />
            <el-skeleton-item variant="text" style="width: 80%; margin-bottom: 10px" />
            <el-skeleton-item variant="text" style="width: 90%; margin-bottom: 10px" />
            <el-skeleton-item variant="text" style="width: 70%; margin-bottom: 10px" />
          </div>

          <!-- 分割线 -->
          <el-skeleton-item variant="rect" style="width: 100%; height: 1px; margin: 20px 0" />

          <!-- 支付信息骨架 -->
          <div style="margin-bottom: 20px">
            <el-skeleton-item variant="text" style="width: 100%; margin-bottom: 10px" />
            <el-skeleton-item variant="text" style="width: 85%; margin-bottom: 10px" />
          </div>

          <!-- 餐厅信息骨架 -->
          <div style="margin-top: 50px">
            <el-skeleton-item variant="text" style="width: 100%; margin-bottom: 10px" />
            <el-skeleton-item variant="text" style="width: 90%; margin-bottom: 10px" />
            <el-skeleton-item variant="text" style="width: 95%" />
          </div>
        </template>
      </el-skeleton>
    </div>

    <!-- 实际内容 -->
    <div v-else class="bill-card-box" :class="orderDetailData ? 'show' : 'hide'">
      <!-- 餐厅名字 -->
      <div class="title">{{ shopName }}</div>

      <div class="description">【结账单】</div>
      <!-- 桌台 -->
      <div class="desc-item">
        <div>桌台： {{ computedDeskName }}</div>
        <span>收银员：{{ clerkName }}</span>
      </div>
      <!-- 桌号 -->
      <div class="desc-item">
        <div>订单ID：{{ dealAssignDataFunction('', orderDetailData?.ticket_id) }}</div>
        <span>[第{{ dealAssignDataFunction('', orderDetailData?.detail?.printNum) }}次打印]</span>
      </div>
      <div class="desc-item">
        <div>打印时间：{{ dealAssignDataFunction('', timeInfo?.timeSlotList?.print?.time) }}</div>
        <span>[{{ dealAssignDataFunction('', timeInfo?.timeSlotList?.print?.slot) }}]</span>
      </div>
      <div class="desc-item">
        <div>开台时间：{{ dealAssignDataFunction('', timeInfo?.timeSlotList?.start?.time) }}</div>
        <span>[{{ dealAssignDataFunction('', timeInfo?.timeSlotList?.start?.slot) }}]</span>
      </div>
      <div class="desc-item">
        <div>
          结束时间：{{ dealAssignDataFunction('', timeInfo?.timeSlotList?.order_pay_time?.time) }}
        </div>
        <span
          >[{{ dealAssignDataFunction('', timeInfo?.timeSlotList?.order_pay_time?.slot) }}]</span
        >
      </div>
      <div class="desc-line"></div>
      <div class="desc-content">
      <!-- 表头 -->
      <div class="desc-item table" :class="{ 'table-5': priceInfo.is_vip == 1 }">
        <div class="food-name">菜品名称</div>
        <span class="food-num">数量</span>
        <span class="food-num">单价</span>
        <span v-if="priceInfo.is_vip == 1" class="food-num">会员价</span>
        <div class="food-money">总金额</div>
      </div>
      <div class="desc-line"></div>

      <!-- 菜品 -->
      <template v-if="feast_food_list.length > 0">
        <div class="good-list-box">
          <div class="good-item table good-item-title" :class="{ 'table-5': priceInfo.is_vip == 1 }">
            <div class="foodName">
              <p>酒席</p>
            </div>
            
            <div class="foodNum">
              {{ dealAssignDataFunction(0, orderDetailData?.detail?.priceInfo.openNum) }}
              席
            </div>
            <div class="foodNum">
              {{ dealAssignDataFunction(0, orderDetailData?.detail?.priceInfo.feastMoney) }}
            </div>
            <div v-if="priceInfo.is_vip == 1" class="foodNum"></div>
            <div class="foodMoney">
              {{ dealAssignDataFunction(0, orderDetailData?.detail?.priceInfo.allFeastMoney) }}
            </div>
          </div>
        </div>
        <div class="good-list-box" v-for="food in feast_food_list" :key="food.name">
          <div
            class="good-item table"
            :class="{ 
              'good-item-title': food.groupInfo && food.groupInfo.length,
              'table-5': priceInfo.is_vip == 1 
            }"
          >
            <div class="foodName">
              <p>{{ (food.is_discount == 1 ? '* ' : '') + food.name }}</p>
            </div>
            <div class="foodNum">{{ food.num }} * {{ food.desk_num }}席</div>
            <div class="foodNum">{{ food.price }}</div>
            <div v-if="priceInfo.is_vip == 1" class="foodNum">{{ food.member_price || food.money }}</div>
            <div class="foodMoney">{{ food.total_money }}</div>
          </div>
          <div class="good-sku-item" v-if="dealFoodSkuDescFun(food)">
            ({{ dealFoodSkuDescFun(food) }})
          </div>

          <div class="good-list-box" v-for="data in food.groupInfo" :key="data.sku_id">
            <div class="good-item table" :class="{ 'table-5': priceInfo.is_vip == 1 }">
              <div class="foodName">
                <p>{{ (data.is_discount == 1 ? '* ' : '') + data.name }}</p>
              </div>
              <div class="foodNum">{{ data.num }} * {{ data.desk_num }}席</div>
              <div class="foodNum">{{ data.price }}</div>
              <div v-if="priceInfo.is_vip == 1" class="foodNum">{{ data.member_price || data.money }}</div>
              <div class="foodMoney">{{ data.total_money }}</div>
            </div>
            <div class="good-sku-item" v-if="dealFoodSkuDescFun(data)">
              ({{ dealFoodSkuDescFun(data) }})
            </div>
          </div>
        </div>
        <div class="desc-line"></div>
      </template>
      <!-- // 单一菜品 -->
      <div class="good-list-box" v-for="food in foodList" :key="food.id">
        <div
          class="good-item table"
          :class="{ 
            'good-item-title': food.groupInfo && food.groupInfo.length,
            'table-5': priceInfo.is_vip == 1 
          }"
        >
          <div class="foodName">
            <p>{{ (food.is_discount == 1 ? '* ' : '') + food.name }}</p>
          </div>
          <div class="foodNum">
            {{ food.num }} {{ Number(food.desk_num || 0) > 1 ? `*${food.desk_num}席` : '' }}
          </div>
          <div class="foodNum">{{ food.price }}</div>
          <div v-if="priceInfo.is_vip == 1" class="foodNum">{{ food.member_price || food.money }}</div>
          <div class="foodMoney">{{ food.total_money }}</div>
        </div>
        <div class="good-sku-item" v-if="dealFoodSkuDescFun(food)">
          ({{ dealFoodSkuDescFun(food) }})
        </div>
        <div class="good-list-box" v-for="data in food.groupInfo" :key="data.sku_id">
          <div class="good-item table" :class="{ 'table-5': priceInfo.is_vip == 1 }">
            <div class="foodName">
              <p>{{ data.name }}</p>
            </div>
            <div class="foodNum">{{ data.num }}</div>
            <div class="foodNum">{{ data.price }}</div>
            <div v-if="priceInfo.is_vip == 1" class="foodNum">{{ data.member_price || data.money }}</div>
            <div class="foodMoney">{{ data.total_money }}</div>
          </div>
          <div class="good-sku-item" v-if="dealFoodSkuDescFun(data)">
            ({{ dealFoodSkuDescFun(data) }})
          </div>
        </div>
      </div>
      <!-- // 退菜 -->
      <div v-if="back_list && back_list.length > 0" class="good-list-box" v-for="food in back_list" :key="food.id">
        <div
          class="good-item table"
          :class="{ 
            'good-item-title': food.groupInfo && food.groupInfo.length,
            'table-5': priceInfo.is_vip == 1 
          }"
        >
          <div class="foodName">
            <p>{{ (food.is_discount == 1 ? '* ' : '') + food.name }}</p>
          </div>
           <div class="foodNum">
             {{ food.num }} {{ Number(food.desk_num || 0) > 1 ? `*${food.desk_num}席` : '' }}
           </div>
           <div class="foodNum">{{ food.price || food.money }}</div>
           <div v-if="priceInfo.is_vip == 1" class="foodNum">{{ food.member_price || food.price || food.money }}</div>
           <div class="foodMoney">{{ food.total_money }}</div>
         </div>
         <div class="good-sku-item">(退)</div>
        <div class="good-list-box" v-for="data in food.groupInfo" :key="data.sku_id">
          <div class="good-item table" :class="{ 'table-5': priceInfo.is_vip == 1 }">
            <div class="foodName">
              <p>{{ (data.is_discount == 1 ? '* ' : '') + data.name }}</p>
            </div>
            <div class="foodNum">{{ data.num }}</div>
            <div class="foodNum">{{ data.money }}</div>
            <div v-if="priceInfo.is_vip == 1" class="foodNum">{{ data.member_price || data.money }}</div>
            <div class="foodMoney">{{ data.total_money }}</div>
          </div>
          <div class="good-sku-item">(退)</div>
        </div>
      </div>
      <div class="desc-line"></div>
      <!--    酒席数量:detail.priceInfo.openNum
            酒席总金额:detail.priceInfo.allFeastMoney
            菜品单价合计:detail.priceInfo.singleMoney
            菜品数量合计:detail.priceInfo.foodNum
            菜品总金额合计:detail.priceInfo.foodAllMoney -->
      <!-- 应收 -->
      <div class="good-list-box">
        <div class="good-item table" :class="{ 'table-5': priceInfo.is_vip == 1 }">
          <div class="foodName">小计</div>
          <div class="foodNum">
            {{ dealAssignDataFunction(0, orderDetailData?.detail?.priceInfo.foodNum) }}
          </div>
          <div class="foodNum">
          </div>
          <div v-if="priceInfo.is_vip == 1" class="foodNum"></div>
          <div class="foodMoney">
            {{ dealAssignDataFunction(0, orderDetailData?.detail?.priceInfo.originMoney) }}
          </div>
        </div>
      </div>
      <div class="desc-line"></div>
      <!-- 金额详情 -->
      <template v-if="priceInfo.backNum && priceInfo.backNum > 0">
        <div class="desc-item table-3">
          <div>退菜</div>
          <div>{{ priceInfo.backNum }}份</div>
          <div>-{{ priceInfo.backMoney }}</div>
        </div>
      </template>
      <template v-if="priceInfo.presentNum && priceInfo.presentNum > 0">
        <div class="desc-item table-3">
          <div>赠送</div>
          <div>{{ priceInfo.presentNum }}份</div>
          <div>-{{ priceInfo.presentMoney }}</div>
        </div>
      </template>
      <template v-if="priceInfo?.memberSubMoney && priceInfo.memberSubMoney > 0">
        <div class="desc-item table-3">
          <div>会员价优惠</div>
          <div></div>
          <div>-{{ priceInfo.memberSubMoney }}</div>
        </div>
      </template>
      <template v-if="coupon?.name">
      <div class="desc-item table-3">
        <div>优惠券</div>
        <div>{{ coupon?.name }}</div>
        <div>-{{ coupon?.money || coupon?.amount }}</div>
      </div>
      </template>

      <template v-if="priceInfo.point && priceInfo.point > 0">
        <div class="desc-item table-3">
          <div>积分抵扣</div>
          <div>{{ priceInfo.point }}积分</div>
          <div>-{{ priceInfo.pointMoney }}</div>
        </div>
      </template>
      <template v-if="priceInfo.reduceMoney && priceInfo.reduceMoney > 0">
        <div class="desc-item table-3">
          <div>抹零</div>
          <div>{{ priceInfo.reduceMoney }}元</div>
          <div>-{{ priceInfo.reduceMoney }}</div>
        </div>
      </template>
      <template v-if="priceInfo.discountMoney && priceInfo.discountMoney > 0">
        <div class="desc-item table-3">
          <div>打折</div>
          <div></div>
          <div>-{{ priceInfo.discountMoney }}</div>
        </div>
      </template>
      <template v-if="priceInfo.serviceMoney && priceInfo.serviceMoney > 0">
        <div class="desc-item table-3">
          <div>服务费</div>
          <div></div>
          <div>+{{ priceInfo.serviceMoney }}</div>
        </div>
      </template>
      <template v-if="priceInfo.feastMoney && priceInfo.feastMoney > 0">
        <div class="desc-item table-3">
          <div>酒席单席金额</div>
          <div></div>
          <div>{{ priceInfo.feastMoney }}</div>
        </div>
      </template>
      <template v-if="priceInfo.allFeastMoney && priceInfo.allFeastMoney > 0">
        <div class="desc-item table-3">
          <div>酒席全部金额</div>
          <div></div>
          <div>{{ priceInfo.allFeastMoney }}</div>
        </div>
      </template>
      <template v-if="priceInfo.openNum && priceInfo.openNum > 1">
        <div class="desc-item table-3">
          <div>酒席数量</div>
          <div></div>
          <div>{{ priceInfo.openNum }}席</div>
        </div>
      </template>

      <div class="desc-line"></div>

      <!-- 应收合计 -->
      <div class="desc-item">
        <div>应收合计</div>
        <span></span>
        <div>{{ orderDetailData?.detail?.priceInfo?.payMoney || originMoney }}</div>
      </div>
      <div class="desc-line"></div>
      <!-- 实收  -->
      <div class="desc-item">
        <div>实收：</div>
        <span></span>
        <span>{{ payMethod  }} {{ orderDetailData?.detail?.priceInfo?.real_pay_money || payMoney }}</span>
      </div>
      <template v-if="payInfo.length > 1 || credit_list.length > 0">
        <div class="desc-item">
          <div>实收明细</div>
        </div>
        <div class="desc-item" v-for="item in payInfo">
          <div>{{ item.name }}:</div>
          <span></span>
          <span>{{ item.money || item.amount }}</span>
        </div>
        <div class="mt-10" v-for="item in credit_list">
          <div class="desc-item">
            <div>{{ item.type == 1 ? '企业挂账' : '个人挂账' }}:</div>
            <span></span>
            <span>{{ item.money || item.amount }}</span>
          </div>
          <div class="desc-item">
            <div>{{ item.type == 1 ? '企业账户' : '挂账账户' }}:</div>
            <span></span>
            <span>{{ item.account_name }}</span>
          </div>
          <div class="desc-item">
            <div>账户累计挂账金额:</div>
            <span></span>
            <span>{{ item.used }}</span>
          </div>
          <div class="desc-item">
            <div>剩余信用额度:</div>
            <span></span>
            <span>{{ item.balance }}</span>
            </div>
            <div class="desc-item">
              <div>担保人:</div>
              <span></span>
              <span>{{ item.org_name  }}</span>
            </div>
            <div class="desc-item">
              <div>消费客户签字:</div>
              <span></span>
              <span></span>
            </div>
          
          <!-- <div class="desc-item">
            <div>{{ item.type == 1 ? '企业挂账' : '个人挂账' }}:</div>
            <span></span>
            <span>{{ item.money || item.amount }}</span>
          </div>
          <div class="desc-item">
            <div>{{ item.type == 1 ? '挂账企业' : '担保人' }}:</div>
            <span></span>
            <span>{{ item.org_name }}</span>
          </div>
          <div class="desc-item">
            <div>{{ item.type == 1 ? '员工名称' : '挂账人' }}:</div>
            <span></span>
            <span>{{ item.account_name }}</span>
          </div>
          <div v-if="item.type == 1" class="desc-item">
            <div>企业已挂账金额:</div>
            <span></span>
            <span>{{ item.hangMoney || 0 }}</span>
          </div> -->
        </div>
      </template>
      <template v-if="userInfo && Object.keys(userInfo).length > 0">
        <div class="desc-line"></div>
        <!-- // 会员信息 -->
        <div class="desc-item">
          <div>会员姓名： {{ userInfo.real_name }}</div>
          <span>会员类型：{{ userInfo.grade_name }}</span>
        </div>
        <div class="desc-item">
          <div>会员卡号： {{ userInfo.user_id }}</div>
          <span></span>
        </div>
        <div class="desc-item">
          <div>会员积分： {{ userInfo.points }}</div>
          <span>会员余额：{{ userInfo.balance }}</span>
        </div>
      </template>
    </div>
      <!-- 餐厅地址 -->
      <div class="address-phone-box">
        <div>餐厅地址：{{ shopAddress }}</div>
        <div>餐厅电话：{{ shopPhone }}</div>
        <div>技术支持：贵州一粒米科技餐饮软件服务有限公司</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { fetchTicketDetail } from '@/api/user'
import { dealAssignDataFunction } from '@/utils/toolsValidate'
import type { FoodItem, UserInfo, OrderDetail, TimeInfo, PayInfo, CouponInfo } from '@/types/bill'

interface Props {
  selectedOrderId: string
  activeIndex: number
}

const props = withDefaults(defineProps<Props>(), {
  selectedOrderId: '',
  activeIndex: 0
})

// 订单详情回显数据
const orderDetailData = ref<OrderDetail>({})
const timeInfo = ref<TimeInfo>({})
const priceInfo = ref<any>({})
const payInfo = ref<PayInfo[]>([])
const credit_list = ref<PayInfo[]>([])
const userInfo = ref<UserInfo>({})
const coupon = ref<CouponInfo>({})

// 加载状态
const loading = ref(false)

// 支付方式枚举 (暂时保留，可能后续会用到)
// const payMethodEunm = {
//   balance: '余额',
//   cash: '现金',
//   virtual: '虚拟支付',
//   alipay: '支付宝',
//   on_account: '挂账',
//   integripay: '积分支付'
// }

// 处理多个桌台回显
const computedDeskName = computed(() => {
  let deskNameList: string[] = []
  if (orderDetailData.value?.detail?.deskList?.length) {
    deskNameList = orderDetailData.value.detail.deskList.map((desk: any) => {
      return `${desk.name}/${desk.use_num}人`
    })
    return deskNameList.join('、')
  }
  return ''
})

// 处理回显菜品的规格信息（做法+口味+部位）
const dealFoodSkuDescFun = (item: FoodItem) => {
  if (item?.notes?.length) {
    return item.notes.join('、')
  } else {
    return false
  }
}

// 餐厅名称
const shopName = computed(() => {
  return dealAssignDataFunction('', orderDetailData.value?.detail?.shopInfo?.shop_name)
})

// 餐厅电话
const shopPhone = computed(() => {
  return dealAssignDataFunction('', orderDetailData.value?.detail?.shopInfo?.phone)
})

// 餐厅地址
const shopAddress = computed(() => {
  return dealAssignDataFunction('', orderDetailData.value?.detail?.shopInfo?.address)
})

// 收银员
const clerkName = computed(() => {
  return dealAssignDataFunction('', orderDetailData.value?.detail?.clerkName)
})

// 结束时间 (暂时注释，未使用)
// const endTime = computed(() => {
//   return dealAssignDataFunction('', orderDetailData.value?.create_time)
// })

// 应收
const originMoney = computed(() => {
  return dealAssignDataFunction(0, orderDetailData.value?.detail?.priceInfo?.originMoney)
})

// 实收
const payMoney = computed(() => {
  return dealAssignDataFunction(0, orderDetailData.value?.detail?.priceInfo?.payMoney)
})

// 菜品列表
const foodList = computed((): FoodItem[] => {
  return dealAssignDataFunction([], orderDetailData.value?.detail?.foodList) as FoodItem[]
})

const feast_food_list = computed((): FoodItem[] => {
  return dealAssignDataFunction([], orderDetailData.value?.detail?.feast_food_list) as FoodItem[]
})

const back_list = computed((): FoodItem[] => {
  return dealAssignDataFunction([], orderDetailData.value?.detail?.back_list) as FoodItem[]
})

// 支付方式
const payMethod = computed(() => {
  if (credit_list.value.length > 0 && payInfo.value.length == 0) {
    return '挂账支付'
  }

  let payMethod = [...payInfo.value, ...credit_list.value]
  if (payMethod.length > 1) return '混合支付'
  return payMethod.length ? payMethod[0].name : ''
})

// 获取小票数据
const getTicketDetail = async (id: string) => {
  const datas = {
    order_id: id,
    type: 'JZ'
  }
  try {
    loading.value = true
    const res = await fetchTicketDetail(datas)
    console.log('res==========', res)

    if (res.status === 200) {
      // 逻辑js使用
      orderDetailData.value = dealAssignDataFunction({}, res?.data?.detail)
      coupon.value = dealAssignDataFunction({}, res?.data?.detail?.detail?.coupon)
      console.log(coupon.value)

      timeInfo.value = dealAssignDataFunction({}, res?.data?.detail.detail?.timeInfo)
      priceInfo.value = dealAssignDataFunction({}, res?.data?.detail?.detail?.priceInfo)
      payInfo.value = dealAssignDataFunction([], res?.data?.detail?.detail?.payInfo)
      credit_list.value = dealAssignDataFunction([], res?.data?.detail?.detail?.credit_list)
      userInfo.value = dealAssignDataFunction({}, res?.data?.detail?.detail?.userInfo)
    }
  } catch (error) {
    console.error('获取小票详情失败:', error)
  } finally {
    loading.value = false
  }
}

// 监听选中订单ID变化
watch(
  () => props.selectedOrderId,
  newVal => {
    // 执行代码，已结账的才请求
    if (newVal || props.activeIndex == 1) {
      getTicketDetail(newVal)
    }
  },
  { immediate: true }
)

// 监听状态筛选变化
watch(
  () => props.activeIndex,
  newVal => {
    // 执行代码，已结账的才请求
    if (newVal != 1) {
      orderDetailData.value = {}
    }
  },
  { immediate: true }
)
</script>

<style lang="scss" scoped>
.hide {
  display: none !important;
}
.show {
  display: block !important;
  width: 420px !important;
}
.bill-card-box {
  width: 420px;
  //   height: 986px;
  overflow-y: auto;
  overflow-x: hidden;
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 3px 0px 24px 0px rgba(0, 0, 0, 0.16);
  box-sizing: border-box;
  padding: 30px;
  .title {
    font-size: 20px;
    font-family:
      PingFang SC,
      PingFang SC-Bold;
    font-weight: 700;
    text-align: center;
    color: #333333;
  }
  .description {
    font-size: 16px;
    font-family:
      PingFang SC,
      PingFang SC-Bold;
    font-weight: 700;
    text-align: center;
    color: #333333;
    margin: 10px 0 18px 0;
  }
  .desc-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    font-size: 13px;
    font-family:
      PingFang SC,
      PingFang SC-Bold;
    font-weight: 700;
    color: #333333;
    .food-name {
      text-align: left;
    }
    .food-num {
      text-align: right;
    }
    .food-money {
      text-align: right;
    }
  }
  // .desc-content {
  //   max-height: 450px;
  //   overflow-y: scroll;
  //   // 设置滚动条宽度
    
  //   ::-webkit-scrollbar {
  //     width: 1px;
  //   }
  //   ::-webkit-scrollbar-thumb {
  //     background-color: #888;
  //     border-radius: 1px;
  //   }
  // }
  .good-list-box {
    margin-top: 10px;
    .good-item {
      display: flex;
      align-items: center;
      font-size: 14px;
      font-family:
        PingFang SC,
        PingFang SC-Bold;
      font-weight: 700;
      color: #000000;
      .foodName {
        text-align: left;
        word-break: break-all;
        overflow-wrap: break-word;
      }
      .foodNum {
        text-align: right;
      }
      .foodMoney {
        text-align: right;
      }
    }
    .good-item-title {
      // font-size: 16px !important;
      margin-bottom: 10px;
    }
    .good-sku-item {
      margin-top: 10px;
      font-size: 14px;
      font-family:
        PingFang SC,
        PingFang SC-Bold;
      font-weight: 500;
      color: #000000;
      line-height: 18px;
    }
  }

  .desc-line {
    width: 360px;
    height: 1px;
    background: #e2e2e2;
    margin-top: 12px;
    margin-bottom: 6px;
    position: relative;
  }
  .desc-title {
    font-size: 16px;
    font-family:
      PingFang SC,
      PingFang SC-Bold;
    font-weight: 700;
    text-align: center;
    color: #333333;
    margin: 20px 0 10px 0;
  }
  .address-phone-box {
    margin-top: 50px;
    font-size: 14px;
    font-family:
      PingFang SC,
      PingFang SC-Regular;
    font-weight: 400;
    text-align: center;
    color: #333333;
    line-height: 24px;
  }
  .table {
    display: grid !important;
    grid-template-columns: 130px 50px 60px 1fr;
    gap: 10px;
    align-items: center;
  }
  // 动态列数支持（带会员价）
  .table.table-5 {
    grid-template-columns: 120px 50px 50px 50px 1fr;
  }
  .table-3 {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    text-align: center;
    > div:first-child {
      text-align: left;
    }
    > div:last-child {
      text-align: right;
    }
  }
  .mt-10{
    margin-top: 20px;
  }
}
</style>
